import React from 'react';
import Utils from '../../utils/utils'
import {fetch, post,postBlob} from '../../my_axios/api'
import {Card, Button, Table, Icon, Modal, message} from 'antd';
import DynamicSearchBar from '../../pages/report/report_mange/components/dynamicSearchBar/index'
import moment from 'moment'

export default class MyReport extends React.Component {
    state={
        reportBrowseQueryList:[],
        reportBrowseQueryFormList:[],
        reportBrowseColumnList:[],
    };
    componentWillMount() {
        this.getReportQueryListOfBrowse();
        this.browseQuerSubmit();
    }
    getReportQueryListOfBrowse(){//获取筛选栏
        let params = {
            size: 999,
            sort: '',
            page: '',
            name: '',
            report:this.props.reportId,
            field:''
        };
        fetch('report_query/list', params).then(res => {
            if (res.status === 'success') {
                this.setState({
                    reportBrowseQueryList: res.data.content,
                });
                let list=[];
                this.state.reportBrowseQueryList.map((item)=>{
                    let type='';
                    switch (item.data_type){
                        case 'NUMBER':
                            type='InputNumberRange';
                            break;
                        case 'DATE':
                            type='DateRange';
                            break;
                        case 'STRING':
                            type='INPUT';
                            break;
                    }
                    let object={
                        type: type,
                        label: item.name,
                        field: item.field,
                        placeholder: '请输入'+item.name,
                        initialValue: '',
                        seq:item.seq
                    };
                    list.push(object);
                });
                list.sort(this.sortSeq);
                this.setState({
                    reportBrowseQueryFormList:list
                });
                this.getReportColumnListOfBrowse();
            } else {
                message.error(res.data.message);
            }
        }).catch(err => {
            console.log(err);
        });
    }
    getReportColumnListOfBrowse(){//获取table列
        let params = {
            size: 999,
            sort: '',
            page: '',
            name: '',
            report:this.props.reportId,
            field:''
        };
        fetch('report_column/list', params).then(res => {
            if (res.status === 'success') {
                this.setState({
                    reportBrowseColumnList: res.data.content,
                });
                let testList=this.state.reportBrowseColumnList;
                testList.sort(this.sortSeq);//排序
                let list=[];
                let width=0;
                this.state.reportBrowseColumnList.map((item)=>{
                    width+=item.width;
                    let object= {
                        title:item.name,
                        width:item.width,
                        dataIndex:item.field,
                        key:item.field,
                        render: (text, row, index) => {
                            return <div>
                                {Utils.formateDate(text)!=='NaN-NaN-NaN NaN:NaN:NaN'?Utils.formateDate(text):text}
                            </div>;
                        },
                    };
                    list.push(object);
                });
                this.setState({
                    reportBrowseColumnTable:list,
                    tableWidth:width
                });
            } else {
                message.error(res.data.message);
            }
        }).catch(err => {
            console.log(err);
        });
    }
    browseQuerSubmit=(fieldsValue)=>{
        let list=[];
        for(let item in fieldsValue){
            let object={
                field:item,
                value:fieldsValue[item]!==undefined?fieldsValue[item]:''
            };
            list.push(object);
        }

        let _this=this;
        list.map((listItem)=>{
            _this.state.reportBrowseQueryList.map((item)=>{
                if(listItem.field===item.field){
                    if(item.data_type!=='NUMBER'&&item.data_type!=='DATE'){
                        item.value1=listItem.value;
                    }
                    if(item.data_type==='DATE'){
                        item.value1= listItem.value[0]!==undefined?moment(listItem.value[0]).format("YYYY-MM-DD HH:mm"):'';
                        item.value2= listItem.value[1]!==undefined?moment(listItem.value[1]).format("YYYY-MM-DD HH:mm"):'';
                    }
                }else if(listItem.field===item.field+'_start'){
                    item.value1=listItem.value;
                }else if(listItem.field===item.field+'_end'){
                    item.value2=listItem.value;
                }
            });
        });
        this.getExecReport();
        // let queryList=[];
        // for(let item in fieldsValue){
        //     console.log(typeof(fieldsValue[item])!=='undefined')
        // }
        //默认是moment类型
        //moment 转字符串
        // moment(fieldsValue.date[0]).format("YYYY-MM-DD HH:mm")
    };
    getExecReport(){//获取执行报表数据
        let params = {
            id:this.props.reportId,
            query:[]
        };
        let queryList=[];
        this.state.reportBrowseQueryList.map((item)=>{
            let object={
                "field":item.field,
                "data_type": item.data_type,
                "value1": item.value1!==undefined?item.value1:'',
                "value2": item.value2!==undefined?item.value2:''
            };
            queryList.push(object)
        });
        params.query=queryList;
        post('report/exec', params).then(res => {
            if (res.status === 'success') {
                this.setState({
                    reportBrowseExecData:res.data
                });
            } else {
                message.error(res.data.message);
            }
        }).catch(err => {
            console.log(err);
        });
    }
    reportExport=()=>{//导出报表
        let params={
            "id":this.props.reportId,
            "query": []
        };
        let queryList=[];
        this.state.reportBrowseQueryList.map((item)=>{
            let object={
                "field":item.field,
                "data_type": item.data_type,
                "value1": item.value1!==undefined?item.value1:'',
                "value2": item.value2!==undefined?item.value2:''
            };
            queryList.push(object)
        });
        params.query=queryList;
        postBlob('report/export',params).then(res => {
            let url = window.URL.createObjectURL(new Blob([res]))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', '报表.xls');
            document.body.appendChild(link)
            link.click()
        }).catch(err => {
            console.log(err);
        });
    };
    /**
     * 排序
     * @param a
     * @param b
     * @returns {number}
     */
    sortSeq(a,b){
        return a.seq-b.seq
    }

    render() {
        return (
            <div>
                {/*{*/}
                    {/*this.state.reportBrowseQueryFormList.length!==0?*/}
                        {/*<DynamicSearchBar*/}
                            {/*formList={this.state.reportBrowseQueryFormList}*/}
                            {/*filterSubmit={this.browseQuerSubmit}*/}
                            {/*reportExport={this.reportExport}*/}
                        {/*>*/}
                        {/*</DynamicSearchBar>:null*/}
                {/*}*/}
                <div className="report_browse_table" >
                    <div style={{width:this.state.tableWidth===0?'100%':this.state.tableWidth}}>
                        <Table
                            bordered
                            size='small'
                            columns={this.state.reportBrowseColumnTable}
                            rowKey="id"
                            dataSource={this.state.reportBrowseExecData}
                            pagination={false}
                        />
                    </div>
                </div>
            </div>
        )
    }
}